<template>
<div class="construction views-container">
  <share-link :config="shareLinkConfig" ref="sharelink">
    <template slot="title">-造节</template>
      <template slot="el-form-item">
        <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
         <el-form-item label="短链接" v-if="shareLinkConfig.params.weChat_short_url">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.weChat_short_url" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.weChat_short_url,$event)">复制</el-button>
          </el-input>
        </el-form-item>
      </template>
        </share-link>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
        <router-link tag="span" to="/application/themeconstructionAdd">
          <el-button size="small" type="primary">添加活动</el-button>
        </router-link>
      </div>
        <div class="wlm-table-header">
            <!-- :model="tableFormatData.construction.files" -->
            <el-form :model="tableFormatData.construction.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="专题名称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.construction.files.special_name" placeholder="请输入专题名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间：">
                        <el-date-picker style="width:360px;margin-right:0;" v-model="tableFormatData.construction.files.time" :picker-options="pickerOptions" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                    </el-form-item>
                      <el-form-item label="活动状态：">
                        <!-- <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.construction.files.status" placeholder="请选择活动状态" style="width:160px;">

                        </el-input> -->
                          <el-select v-model="tableFormatData.construction.files.status" placeholder="请选择活动状态" style="width:160px;">
                              <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table style="width: 100%" :ref="tableFormatData.construction.key" :data="tableFormatData.construction.tableData" @selection-change="handleSelectionChange">
                <el-table-column prop="date" label="专题名称">
                   <template slot-scope="scope">
                    <span>{{scope.row.special_name}}</span>
                   </template>
                </el-table-column>
                <el-table-column prop="date" label="专题时间" min-width="130">
                  <template slot-scope="scope">
                    <p>开始时间:{{scope.row.start_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                    <p>结束时间:{{scope.row.end_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="专题状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==1">未开始</span>
                    <span v-if="scope.row.status==2">已开始</span>
                    <span v-if="scope.row.status==3">已结束</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="访问人数">
                   <template slot-scope="scope">
                  <span>{{scope.row.visit_num}}</span>
                   </template>
                </el-table-column>
                <el-table-column label="访问量" >
                     <template slot-scope="scope">
                       <span>{{scope.row.views_num}}</span>
                     </template>
                </el-table-column>
                 <el-table-column label="有效分享量" >
                     <template slot-scope="scope">
                       <span>{{scope.row.forward_num}}</span>
                     </template>
                </el-table-column>
                 <el-table-column label="客服/社群" >
                     <template slot-scope="scope">
                       <div v-for="(item,idnex) in scope.row.community" :key="idnex">
                         <span>{{item.title}}</span>
                       </div>
                     </template>
                </el-table-column>
                 <el-table-column label="关联活动" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.relation_activities==1">福袋</span>
                        <span v-if="scope.row.relation_activities==2">礼包</span>
                        <span v-if="scope.row.relation_activities==3">未关联活动</span>
                    </template>
                 </el-table-column>
                 <el-table-column label="操作" min-width="120">
                     <template slot-scope="scope">
                       <div class="operation-group">
                             <router-link class="wlm-text" tag="span" :to="{path:'/application/themeconstructionHome', query:{theme_festival_id:scope.row.theme_festival_id,festival_page_id:scope.row.festival_page_id?scope.row.festival_page_id:''}}">
                                <el-button type="text" v-if="scope.row.relation_activities!=2 ">设置模版</el-button>
                             </router-link>
                              <div class="btn-line" v-if="scope.row.relation_activities!=2"></div>
                                <el-button class="wlm-text" type="text" @click="sharelink(scope.row.theme_festival_id)">推广</el-button>
                            <div class="btn-line"></div>
                             <router-link class="wlm-text" tag="span" :to="{path:'/application/themeconstructionAdd', query:{theme_festival_id:scope.row.theme_festival_id,status:scope.row.status}}">
                              <el-button type="text">编辑</el-button>
                            </router-link>
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.theme_festival_id)">删除</el-button>
                        </div>
                     </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.construction.pagination.page" :page-sizes="tableFormatData.construction.pagination.pagesizes" :page-size.sync="tableFormatData.construction.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.construction.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  getThemeFestivalList,delThemeFestival,spreadFestival
} from '@/api/application'
import clipboard from '@/utils/clipboard'
import ShareLink from '@/components/ShareLink/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'construction',
  components: {
    ShareLink
  },
  data() {
    return {
      options:[{ value: '1',label: '未开始'},{ value: '2',label: '已开始'},{ value: '3',label: '已结束'}],
      shareLinkConfig: {
                current: 'weChatQr',
                params: {
                    weChat_short_url:'',
                    qrUrl: '',
                    linkUrl: '',
                    weChatQr: '',
                    appQr: ''
                }
            },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      tableFormatData: {
        current: 'construction',
        construction: {
          key: 'construction',
          api: {
            getList: getThemeFestivalList,
            // delList: delThemeFestival
          },
          tableData: [],
          files: {
            // theme_festival_id:'',
            // time: [],
            // ids: [],
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10,20,50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
     sharelink(theme_festival_id) {
            spreadFestival({ theme_festival_id }).then((response) => {
                const { data: { data: { weChat_qrcode, wxApp_qrcode, weChat_url, wxApp_url, url,weChat_short_url } } } = response
                this.shareLinkConfig.params.qrUrl = wxApp_url
                this.shareLinkConfig.params.linkUrl = weChat_url
                this.shareLinkConfig.params.weChatQr = weChat_qrcode
                this.shareLinkConfig.params.appQr = wxApp_qrcode
                this.shareLinkConfig.params.url = url
                this.shareLinkConfig.params.weChat_short_url = weChat_short_url
                this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
            })
            this.$refs.sharelink.toggle()
            },
             handleClipboard(text, event) {
                clipboard(text, event)
                },
    delTableItem(type){
        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    delThemeFestival({theme_festival_id:type}).then(res=>{
                      if(res.data.code==1){
                          this.$message.success(res.data.msg)
                      this.filesSerch()
                      }
                      })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
    },
    
  }
}
</script>
